import React, { Component } from 'react'
import styles from "../assets/styles/pageing.module.css"

export default class Pageing extends Component {
    get totalPage() {
        const { pageSize, total } = this.props
        return Math.ceil(total / pageSize)
    }
    get listPage() {
        const array = []
        for (let index = 0; index < this.totalPage; index++) {
            array.push(<span key={index} data-index={index + 1}>{index + 1}</span>)
        }
        return array
    }
    selectPageEvent = (event) => {
        //默认是字符串
        const page = event.target.getAttribute("data-index");
        this.props.fenye(Number(page))
    }
    render() {
        const { currentPage } = this.props
        return (
            <div className={styles.fenye}>
                <span>当前{currentPage}页/共{this.totalPage}页</span>
                <select name="" id="">
                    <option value="">3</option>
                    <option value="">6</option>
                    <option value="">9</option>
                </select>
                <input type="text" placeholder='跳转到指定页' />
                <button>go</button>
                <div className={styles.page} onClick={this.selectPageEvent}>
                    {this.listPage}
                </div>
            </div>
        )
    }
}
